<template>
  <div class="trends-com">
    <a-card title="动态" :bordered='false'>
      <a-list size="small" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="item">
              <a-button type="link">{{ item.name1 }}</a-button>
              <span v-if="item.doStatus == 0"> 完成了 </span>
              <span v-if="item.doStatus == 1"> 接取了 </span>
              <span v-if="item.doStatus == 2"> 取消了 </span>
              <span v-if="item.doStatus == 3"> 点赞了 </span>
              <span v-if="item.doStatus == 4"> 查看了 </span>
              <a-button type="link">{{ item.name2 }}</a-button>
              <span> 发布的 </span>
              <a-typography-paragraph
                class="content"
                :ellipsis="{ rows: 1 }"
                :content="item.content"
              >
              </a-typography-paragraph>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      data: [
        {
          doStatus: 0,
          name1: "伊千兰",
          name2: "朱灵慧",
          content:
            "【代取快递】：快递公司为圆通，快递单号为YT987654321，收件人姓名为李四，联系电话为13612345678，收货地址为XX学院XX宿舍楼。",
        },
        {
          doStatus: 1,
          name1: "居星儿",
          name2: "暨奥雅",
          content:
            "【代购物品】：商品名称为阅读器，数量为2个，价格为1000元，收货地址为XX学院XX宿舍楼，联系电话为13812345678。",
        },
        {
          doStatus: 2,
          name1: "郏新洁",
          name2: "庄恨竹",
          content:
            "【兼职服务】：服务类型为补习班老师，工作时间为周末下午，薪酬为300元/天，联系方式为13912345678。",
        },
        {
          doStatus: 3,
          name1: "李雨燕",
          name2: "谢慧恩",
          content:
            "【学习辅导】：科目为英语口语，授课时间为每周五晚上，地点为XX学院自习室，费用为80元/小时，联系方式为18812345678。",
        },
        {
          doStatus: 4,
          name1: "蓬淑然",
          name2: "谭夏萱",
          content:
            "【二手交易】：商品名称为自行车，价格为500元，成色为七成新，联系方式为15912345678。",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
.trends-com {
  overflow: hidden;
  .item {
    width: 100%;
    display: flex;
    height: 56px;
    white-space: nowrap;
    align-items: center;

    .content {
      margin: 8px 16px;
      color: #00000088;
    }
  }
}
</style>